<!-- 文章页面 -->
<template>
  <el-row :gutter="10">
<!--  文章推逛  -->
   <el-col :span="18" >
     <el-card v-for="p in articleArr">
       <el-row :gutter="10">
        <el-col :span="6">
          <img :src="p.url">
        </el-col>
        <el-col :span="18">
          <p style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{p.title}}</p>
        </el-col>
       </el-row>
     </el-card>
   </el-col>
   <!--右侧侧边栏-->
   <el-col :span="6">
    <el-col v-for="p in rightArticleArr">
      <el-card>
        <p style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{p.title}}</p>
        <img :src="p.url">
      </el-card>
    </el-col>
   </el-col>
  </el-row>
</template>
<script setup>
import {ref} from "vue";

//存放文章内容的数组
const articleArr = ref([
    {
      title:"广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租",
      url:"/imgs/article.png",
    },
    {
      title:"广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租",
      url:"/imgs/article.png",
    },
    {
      title:"广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租",
      url:"/imgs/article.png",
    },
    {
      title:"广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租",
      url:"/imgs/article.png",
    },
    {
      title:"广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租广告位招租",
      url:"/imgs/article.png",
    }
])
//存放侧边栏内容的
const rightArticleArr = ref([
  {
    title:"侧边栏广告侧边栏广告侧边栏广告侧边栏广告",
    url:"/imgs/rightArticle.png",
  },
  {
    title:"侧边栏广告侧边栏广告侧边栏广告侧边栏广告",
    url:"/imgs/rightArticle.png",
  },
  {
    title:"侧边栏广告侧边栏广告侧边栏广告侧边栏广告",
    url:"/imgs/rightArticle.png",
  },
  {
    title:"侧边栏广告侧边栏广告侧边栏广告侧边栏广告",
    url:"/imgs/rightArticle.png",
  },
  {
    title:"侧边栏广告侧边栏广告侧边栏广告侧边栏广告",
    url:"/imgs/rightArticle.png",
  },
])
</script>
<style scoped>

</style>